<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-content">
      <category-icons></category-icons>
      <div v-if="!errorShow">
        <home-title :title="homeTitle.viewTitle"></home-title>
        <view-list :viewDatas="homeDatas.viewDatas"></view-list>
        <home-title :title="homeTitle.foodTitle"></home-title>
        <food-list :viewDatas="homeDatas.foodDatas"></food-list>
        <home-title :title="homeTitle.hotelTitle"></home-title>
        <hotel-list :viewDatas="homeDatas.hotelDatas"></hotel-list>
        <home-title :title="homeTitle.massageTitle"></home-title>
        <massage-list :viewDatas="homeDatas.massageDatas"></massage-list>
        <home-title :title="homeTitle.ktvTitle"></home-title>
        <ktv-list :viewDatas="homeDatas.ktvdatas"></ktv-list>
      </div>
      <error :errorShow="errorShow" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import BetterScroll from "better-scroll";
import { mapState } from "vuex";
import { IndexModel } from "models/index";

import CategoryIcons from "./CategoryIcons";
import HomeTitleVue from "./Sub/HomeTitle";
import Error from "./Sub/Error";
import ViewList from "./ViewList";
import Foodist from "./Foodist";
import Hotelist from "./Hotelist";
import Massagelist from "./Massagelist";

import { formatJSON } from "utils/tools";
export default {
  name: "HomeScrollWrapper",
  components: {
    CategoryIcons,
    HomeTitleVue,
    ViewList,
    Foodist,
    Hotelist,
    Error,
    Massagelist,
  },
  data() {
    return {
      errorShow: false,
      currentCityId: 0,
      homeTitle: {
        viewTitle: "推荐景点",
      },
      homeDatas: {
        foodDatas: [],
        hotelDatas: [],
        ktvDatas: [],
        massageDatas: [],
        viewDatas: [],
      },
    };
  },
  computed: {
    ...mapState(["cityId"]),
  },
  mounted() {
    let scroll = new BetterScroll(this.$refs.wrapper);
    this.currentCityId = this.cityId;
    this.getHomeDatas(this.cityId);
  },
  /**
   *keep-alive 组件激活时调用。
   */
  activated() {
    if (this.currentCityId !== this.cityId) {
      this.currentCityId = this.cityId;
      this.getHomeDatas(this.cityId);
    }
  },
  methods: {
    getHomeDatas(cityId) {
      const indexModel = new IndexModel();
      indexModel.getHomeDatas(cityId).then((res) => {
        if (res && res.status === 0) {
          const data = res.data;
          this.errorShow = false;
          this.homeDatas.foodDatas = formatJSON(data.foodDatas, "keyword");
          this.homeDatas.hotelDatas = data.hotelDatas;
          this.homeDatas.ktvDatas = data.ktvDatas;
          this.homeDatas.massageDatas = data.massageDatas;
          this.homeDatas.viewDatas = data.viewDatas;
        } else {
          this.errorShow = true;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
